const Editor = {
  props: ["entityObject"],
  data() {
    return {
      entity: this.entityObject,
    };
  },
  methods: {
    updata() {
      this.$emit("updata");
    },
  },
  template: `
        <div class="ui form">
            <div class="field">
                <textarea
                 placeholder="写点东西....."
                 v-model="entity.body"
                 @input="updata">
                 </textarea>
            </div>
        </div>
    `,
};
const Note = {
  props: ["entitiesObject"],
  data() {
    return {
      entity: this.entitiesObject,
      open: false,
    };
  },
  computed: {
    header() {
      return _.truncate(this.entity.body, { length: 30 });
    },
    updated() {
      return moment(this.entity.meta.updated).fromNow();
    },
    words() {
      return this.entity.body.trim().length;
    },
  },
  methods: {
    save() {
      loadCollection("notes").then((collection) => {
        //   更新数据库中的字段
        collection.update(this.entity);
        //   保存更新的值
        db.saveDatabase();
      });
    },
    destory() {
      this.$emit("distory", this.entity.$loki);
    },
  },
  template: `
        <div class="item">
            <div class="meta">
                {{ updated }}
            </div>
            <div class="container">
                <div class="header" @click="open = !open">
                    {{header || '新建笔记'}}
                </div>
                <div class="extra">
                    <editor :entity-object="entity" v-if="open" @updata="save"></editor>
                    {{words}} 字
                    <i class="right floated trash icon" v-if="open" @click="destory"></i>
                </div>
            </div>
        </div>
    `,
  components: {
    Editor,
  },
};
const Notes = {
  data() {
    return {
      entities: [],
    };
  },
  created() {
    loadCollection("notes").then((collection) => {
      const _entities = collection
        .chain()
        .find()
        .simplesort("$loki", "isdesc")
        .data();
      this.entities = _entities;
      console.log(this.entities);
    });
  },
  template: `
        <div class="ui container notes">
            <h4 class="ui horizontal divider header">
                <i class="paw icon"></i>
                Ninghao Notes App _ vue.js
            </h4>
            <a class="ui right floated basic violet button" @click="create">
                添加笔记
            </a>
            <div class="ui divided items">
                <Note v-for="entity in entities" :key="entity.$loki" :entitiesObject="entity" @distory="remove"></Note>
                <span class="ui small disabled header" v-if="!this.entities.length">还没有笔记请按下 '添加笔记' 按钮</span>
                </div>
        </div>
    `,
  components: {
    Note,
  },
  methods: {
    create() {
      loadCollection("notes").then((collection) => {
        const entity = collection.insert({
          body: "",
        });
        db.saveDatabase();
        this.entities.unshift(entity);
      });
    },
    remove(id) {
      const _entities = this.entities.filter((entity) => {
        return entity.$loki !== id;
      });
      this.entities = _entities;
      loadCollection("notes").then((collection) => {
        collection.remove({ $loki: id });
        db.saveDatabase();
      });
    },
  },
};
const app = new Vue({
  el: "#app",
  components: {
    Notes,
  },
  template: `
        <Notes></Notes>
    `,
});
